473,508 Members | 4,779 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

dynamically create radio buttons

Hi All,

I have looked around for an answer to this question, but haven't found
one as of yet. I'm trying to use javascript to dynamically create
raido buttons. I am able to create them easily enough but they aren't
clickable. It doesn't matter if I set them as checked or not, you can't
manipulate them at all. The code I'm using appears below:

function test(){
componentMainTable = document.getElementById("mycomponent");
componentTable = document.createElement("table");
componentBody = document.createElement("tbody");
componentMainTable.setAttribute("width","100");

//row and table information is created here
row1 = document.createElement("tr");
tab1 = document.createElement("td");
tab1.setAttribute("width", "33%");
tab1.setAttribute("align", "center");
field1 = document.createElement("input");
field1.setAttribute("type","radio");
field1.setAttribute("name","one");
field1.setAttribute("value", 1);
tab2 = document.createElement("td");
tab2.setAttribute("width", "33%");
tab2.setAttribute("align", "center");
field2 = document.createElement("input");
field2.setAttribute("type","radio");
field2.setAttribute("name","one");
field2.setAttribute("value",2);
tab1.appendChild(field1);
tab2.appendChild(field2);
row1.appendChild(tab1);
row1.appendChild(tab2);
componentBody.appendChild(row1);
componentTable.appendChild(componentBody);
componentMainTable.appendChild(componentTable);
field1.setAttribute("checked","checked");

}

If anyone can shed some light on this for me, I would be tremendously
grateful!

Jul 23 '05 #1
2 13479
ob*******@hotmail.com wrote:
Hi All,

I have looked around for an answer to this question, but haven't found
one as of yet. I'm trying to use javascript to dynamically create
raido buttons. I am able to create them easily enough but they aren't
clickable. It doesn't matter if I set them as checked or not, you can't
manipulate them at all. The code I'm using appears below:
Your code works provided the HTML includes something like:

<div id="mycomponent" style="border: thin solid blue">
</div>

I have added a border so you can see the elements in the page, remove
if you wish.
function test(){
componentMainTable = document.getElementById("mycomponent");
componentTable = document.createElement("table");
componentBody = document.createElement("tbody");
componentMainTable.setAttribute("width","100");
Setting style attributes is better done directly using the style
object:

componentMainTable.style.width = "100";

//row and table information is created here
row1 = document.createElement("tr");
tab1 = document.createElement("td");
tab1.setAttribute("width", "33%");
tab1.setAttribute("align", "center");
The same here:

tab1.style.width = "33%";
tab1.style.textAlign = "center";
field1 = document.createElement("input");
field1.setAttribute("type","radio");
field1.setAttribute("name","one");
field1.setAttribute("value", 1);
Element attributes can be set directly:

field1.type = "radio";
field1.name = "one";
field1.value = "1";

[...] field1.setAttribute("checked","checked");


field1.checked = true;

However, it works fine in Firefox but doesn't work in IE. Your
radio buttons should be in a form, but that doesn't fix anything.
Below is a minimal implementation of your code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>demo</title>
<script type="text/javascript">

function test(){

theSpot = document.getElementById("mycomponent");

field1 = document.createElement("input");
field1.type = "radio";
field1.name = "one";
field1.value = "1";

field2 = document.createElement("input");
field2.type = "radio";
field2.name = "one";
field2.value = "2";

theSub = document.createElement("input");
theSub.type = "submit";

theForm = document.createElement("form");
theForm.action = "";
theForm.appendChild(field1);
theForm.appendChild(field2);
theForm.appendChild(theSub);
theSpot.appendChild(theForm);
field1.checked = true;
}
</script>
</head>
<body onload="test();">
<div id="mycomponent" style="border: thin solid blue">
</div>
</body>
</html>

--
Rob
Jul 23 '05 #2
ob*******@hotmail.com wrote:
Hi All,

I have looked around for an answer to this question, but haven't found
one as of yet. I'm trying to use javascript to dynamically create
raido buttons. I am able to create them easily enough but they aren't
clickable. It doesn't matter if I set them as checked or not, you can't
manipulate them at all. The code I'm using appears below:


Unfortunately, it seems DOM methods don't work with IE here. The
following innerHTML works in Firefox and IE:
theSpot = document.getElementById("mycomponent");

var s = [
'<form action="">',
'<input type="radio" name="one" value="1" checked>',
'<input type="radio" name="one" value="2">',
'<input type="submit">',
'</form>'
];

theSpot.innerHTML = s.join('');
If you want to use innerHTML and a table, you can either fill in the
content of a cell, or do the entire table. You can't add/remove
rows/cells with innerHTML (it actually seems to work in Firefox, but
not in IE - the MS spec says it doesn't work in IE and they're right).

--
Rob
Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
2077
by: mortb | last post by:
I create a table containing radiobuttons in client script depending on what choices the user makes. It works fine the radio buttons appear *but* they are *not clickable*. Why? Is there a solution?...
1
3306
by: Karthick Kumar | last post by:
Hi, I have the following code which displays all the images from a specific folder with a Radio button in it: Dim objFile i = 1 For Each objFile In objFolder.Files If (i = 1) Then...
4
3091
by: Harry | last post by:
Hello, I have a page with a RadioButtonList and a PlaceHolder control. The RadioButtonList's AutoPostBack attribute is set to TRUE and its SelectedIndexChanged event loads one of three...
2
11926
by: James P. | last post by:
Help, I need to display radio buttons on a form. The data is from SQL table: each row in each table is displayed as a radio button. I have multiple SQL tables so I understand I need to put...
2
1681
by: epigram | last post by:
I'm dynamically creating a number of radio buttons on my aspx page based upon data read from a db. Each radio button has autopostback turned on. I'm experiencing two problems. 1) I am reading...
2
6281
by: dougawells | last post by:
Hi- I'm wanting to have a set of radio buttons disabled when a form is displayed, then if they check another specific radio button, those would become enabled. I've tried setting it via...
7
4851
by: moksha | last post by:
Hi, I am new to javascript and i am facing a problem in coding. plz help me out. I am using javascript for dynamically creating a table row which contains text boxes and radio...
1
7424
by: castron | last post by:
Hi all, I'm reading user information from Active Directory. I'm allowing the users to search by username from a web form. There will be times when the result will be more than one record. What I'm...
5
6681
by: satyabhaskar | last post by:
hi all, In my web page i have created radio buttons dynamically on to the page .....following is my code string Course, Semester, Section; int rowsCount; string con =...
0
7228
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7332
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
1
7058
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
7502
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
4715
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3206
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
1565
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
769
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
426
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.